import React from 'react';
import PropTypes from 'prop-types';

function Controls({ onNewGame, onCheckSolution, onHint, hintsLeft, disabled, difficulty, onDifficultyChange }) {
    return (
        <div className="controls">
            <div className="difficulty-selector">
                <select 
                    value={difficulty} 
                    onChange={(e) => onDifficultyChange(Number(e.target.value))}
                    disabled={disabled}
                    className="difficulty-select"
                >
                    <option value="5">简单 (5×5)</option>
                    <option value="10">中等 (10×10)</option>
                    <option value="15">困难 (15×15)</option>
                </select>
            </div>
            <button 
                onClick={onNewGame} 
                disabled={disabled}
                className="button primary"
            >
                新游戏
            </button>
            <button 
                onClick={onCheckSolution} 
                disabled={disabled}
                className="button secondary"
            >
                检查答案
            </button>
            <button 
                onClick={onHint}
                disabled={disabled || hintsLeft <= 0}
                className="button hint"
            >
                提示 ({hintsLeft})
            </button>
        </div>
    );
}

Controls.propTypes = {
    onNewGame: PropTypes.func.isRequired,
    onCheckSolution: PropTypes.func.isRequired,
    onHint: PropTypes.func.isRequired,
    hintsLeft: PropTypes.number.isRequired,
    disabled: PropTypes.bool,
    difficulty: PropTypes.number.isRequired,
    onDifficultyChange: PropTypes.func.isRequired
};

export default Controls; 